<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>工作台</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /** 应用快捷块样式 */
        .console-app-group {
            padding: 16px;
            border-radius: 4px;
            text-align: center;
            background-color: #fff;
            cursor: pointer;
            display: block;
        }

        .console-app-group .console-app-icon {
            width: 32px;
            height: 32px;
            line-height: 32px;
            margin-bottom: 6px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            font-size: 32px;
            color: #69c0ff;
        }

        .console-app-group:hover {
            box-shadow: 0 0 15px rgba(0, 0, 0, .08);
        }

        /** //应用快捷块样式 */

        /** 小组成员 */
        .console-user-group {
            position: relative;
            padding: 10px 0 10px 60px;
        }

        .console-user-group .console-user-group-head {
            width: 32px;
            height: 32px;
            position: absolute;
            top: 50%;
            left: 12px;
            margin-top: -16px;
            border-radius: 50%;
        }

        .console-user-group .layui-badge {
            position: absolute;
            top: 50%;
            right: 8px;
            margin-top: -10px;
        }

        .console-user-group .console-user-group-name {
            line-height: 1.2;
        }

        .console-user-group .console-user-group-desc {
            color: #8c8c8c;
            line-height: 1;
            font-size: 12px;
            margin-top: 5px;
        }

        /** 卡片轮播图样式 */
        .admin-carousel .layui-carousel-ind {
            position: absolute;
            top: -41px;
            text-align: right;
        }

        .admin-carousel .layui-carousel-ind ul {
            background: 0 0;
        }

        .admin-carousel .layui-carousel-ind li {
            background-color: #e2e2e2;
        }

        .admin-carousel .layui-carousel-ind li.layui-this {
            background-color: #999;
        }

        /** 广告位轮播图 */
        .admin-news .layui-carousel-ind {
            height: 45px;
        }

        .admin-news a {
            display: block;
            line-height: 70px;
            text-align: center;
        }

        /** 最新动态时间线 */
        .layui-timeline-dynamic .layui-timeline-item {
            padding-bottom: 0;
        }

        .layui-timeline-dynamic .layui-timeline-item:before {
            top: 16px;
        }

        .layui-timeline-dynamic .layui-timeline-axis {
            width: 9px;
            height: 9px;
            left: 1px;
            top: 7px;
            background-color: #cbd0db;
        }

        .layui-timeline-dynamic .layui-timeline-axis.active {
            background-color: #0c64eb;
            box-shadow: 0 0 0 2px rgba(12, 100, 235, .3);
        }

        .dynamic-card-body {
            box-sizing: border-box;
            overflow: hidden;
        }

        .dynamic-card-body:hover {
            overflow-y: auto;
            padding-right: 9px;
        }

        /** 优先级徽章 */
        .layui-badge-priority {
            border-radius: 50%;
            width: 20px;
            height: 20px;
            padding: 0;
            line-height: 18px;
            border-width: 2px;
            font-weight: 600;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid ew-console-wrapper">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card">
                <div class="layui-card-header">公告栏</div>
                <div class="layui-card-body mini-bar" style="height: 300px;">
                    <table class="layui-table" lay-skin="line" id="noticeInfo"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card">
                <div class="layui-card-header">岗位通知</div>
                <div class="layui-card-body mini-bar" style="height: 300px;">
                    <div id="jobAnalys" style="height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header" style="float: left">培养绩效分析</div>
                <div class="layui-card-header" style="z-index: 9999">
                    <select name="tesperName" id="tesperName" style="height: 25px;border-color: whitesmoke">
                    </select>
                </div>
                <div class="layui-card-body">
                    <div id="cultivateQualityEffectAnalyze" style="height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header" style="float: left">任职经历</div>
                <div class="layui-card-header" style="z-index: 9999">
                    <select name="tesperNames" id="tesperName1" style="height: 25px;border-color: whitesmoke">
                    </select>
                </div>
                <div class="layui-card-body">
                    <div id="raiseRequirementAnalyze" style="height: 300px;"></div>
                </div>
                <!--<div class="layui-tab layui-tab-brief" style="margin: 0px">
                    <ul class="layui-tab-title">
                        <li class="layui-this">任职经历</li>
                        <li>任职经历(岗位)</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <div class="layui-card-body">
                                <div id="raiseRequirementAnalyze" style="height: 280px;"></div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <select name="tesperName" id="tesperName1" style="height: 25px;border-color: whitesmoke">
                            </select>
                            <div class="layui-card-body">
                                <div id="raiseRequirementAnalyze1" style="height: 260px;"></div>
                            </div>
                        </div>
                    </div>
                </div>-->
            </div>


            <!--<div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header">任职经历</div>
                <div class="layui-card-body">
                    <div id="raiseRequirementAnalyze" style="height: 300px;"></div>
                </div>
            </div>-->
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header">个人能力分析</div>
                <div class="layui-card-body">
                    <table id="gradeTable" lay-filter="gradeTable"></table>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card">
                <div class="layui-card-header">职位统计</div>
                <div class="layui-card-body">
                    <div id="positionInfo" style="height: 300px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echarts.min.js"></script>

<script>
    layui.use(['jquery', 'table', 'tableX', 'xnUtil', 'layer', 'carousel', 'element', 'admin', 'form'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var table = layui.table;
        var tableX = layui.tableX;
        var admin = layui.admin;
        var xnUtil = layui.xnUtil;
        var carousel = layui.carousel;
        var form = layui.form;
        var device = layui.device();

        /** 渲染周统计图表 */
        var myCharts2 = echarts.init(document.getElementById('cultivateQualityEffectAnalyze'));
        var options2 = {
            tooltip: {},
            legend: {},
            xAxis: {
                name: '名称',
                nameTextStyle: {color: '#595959'},
                type: 'category',
                axisLabel: {
                    rotate: 15,
                    margin: 5
                }
            },
            yAxis: {
                name: '人数',
                type: 'value'
            },
            series: [
                {
                    type: 'bar',
                },
                {
                    type: 'bar',
                },
                {
                    type: 'bar',
                },
                {
                    type: 'bar',
                }],
            dataZoom: [{
                height: '14',
                type: 'slider',
                state: 0,
                end: 100
            }]
        };
        myCharts2.setOption(options2);
        //调查问卷统计明细
        getSuveryDetail("");

        function getSuveryDetail(data) {
            admin.req(getProjectUrl() + 'smallquestio/orgStatic?testpaperId=' + data, function (res) {
                myCharts2.setOption({
                    dataset: {
                        source: res.data
                    }
                })
            });
        }


        $("#tesperName").change(function (val) {
            var vals = $(this).val();
            getSuveryDetail(vals);
        })
        $("#tesperName1").change(function (val) {
            var vals = $(this).val();
            getActiveDetail(vals);
        })

        var myCharts1 = echarts.init(document.getElementById('jobAnalys'));
        var options1 = {
            title: {
                text: '',
                textStyle: {fontSize: 14, color: '#262626', fontWeight: 'normal'},
                subtextStyle: {fontSize: 56, color: '#10B4E8'}, itemGap: 20
            },
            tooltip: {trigger: 'item'},
            legend: {
                orient: 'vertical', right: '0px', top: '0px',
            },
            series: []
        };
        myCharts1.setOption(options1);
        jobAnsyal();

        function jobAnsyal() {
            admin.req(getProjectUrl() + 'sysUser/jobAnaly', function (res) {
                debugger;
                // 饼状图赋值
                myCharts1.setOption({
                    series: [{
                        type: 'pie',
                        radius: [50, 150],
                        center: ['50%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 8
                        },
                        data: res.data,
                        label: {
                            padding: [0, -30]
                        },
                        labelLine: {
                            length: 10,
                            length2: 30
                        },

                        labelLayout: {
                            verticalAlign: 'top',
                            dy: -10
                        }
                    }]
                });
            });
        }

        //任职经历
        var myCharts3 = echarts.init(document.getElementById('raiseRequirementAnalyze'));
        var options3 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        interval: 0,
                        show: true
                    }
                },
            },
            grid: {
                top: '10%',
                bottom: '25%',
                right: '20%'
            },
            xAxis: {
                name: '任职时间',
                data: [],
                axisLabel: {
                    rotate: 15
                }
            },
            yAxis: {
                name: '人数',
            },
            calculable: true,
            dataZoom: [
                {
                    show: true,
                    start: 0,
                    end: 70,
                },
                {
                    type: 'inside',
                    start: 0,
                    end: 70
                },
            ],
            series: [
                {
                    type: 'bar',
                    data: [],
                },
                {
                    type: 'line',
                    data: [],
                }
            ]
        };
        myCharts3.setOption(options3);
        // 赋值
        //活动情况统计明细
        getActiveDetail("");

        function getActiveDetail(name) {
            admin.req(getProjectUrl() + 'sysUser/experienJob?name=' + name, function (res) {
                debugger
                var datas = res.data;
                var acName = [];
                var nums = [];
                for (var i = 0; i < datas.length; i++) {
                    acName.push(datas[i].jobTime);
                    nums.push(datas[i].num);
                }
                myCharts3.setOption({
                    xAxis: {data: acName},
                    series: [{data: nums}, {data: nums}]
                });
            });
        }

        var myCharts5 = echarts.init(document.getElementById('positionInfo'));
        var options5 = {
            tooltip: {trigger: 'item',},
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [{
                name: "立功表现",
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 3,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 24,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
            }]
        };
        myCharts5.setOption(options5);
        // 赋值
        //调查进度统计明细
        getmertj();
        function getmertj() {
            admin.req(getProjectUrl() + 'sysUser/getQusition', function (res) {
                debugger;
                var vals = res.data
                if (vals.length > 0) {
                    myCharts5.setOption({
                        series: [{
                            data: vals
                        }]
                    })
                }

            });
        }

        var insTbs = tableX.render({
            elem: '#gradeTable',
            url: getProjectUrl() + 'sysUser/pageAverage',
            page: true,
            toolbar: ['<p>',
                '<button lay-event="personAnaly" perm-show="sysUser:personAnaly" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe67d;</i>能力分析</button>&nbsp;',
                // '<button lay-event="queryAnaly" perm-show="sysUser:queryAnaly" class="layui-btn layui-btn-sm icon-btn"><i class="layui-icon">&#xe654;</i>查看分析</button>&nbsp;',
                '</p>'].join(''),
            limit: 5,
            limits: [5,10,20],
            cellMinWidth: 90,
            cols: [
                [
                    {type: 'radio'},
                    {field: 'number', title: '序号', type: 'numbers'},
                    {field: 'id', title: 'id', sort: true, hide: true},
                    {
                        field: 'name', title: '名称', sort: false,
                    },
                    {
                        field: 'orgName', title: '单位', sort: false,
                    },
                    {field: 'score', title: '平均分数', sort: false}
                ]
            ],
            done: function (res, curr, count) {
                xnUtil.tableDone(insTbs, res, curr, count);
            }
        });

        //缓存字典
        xnUtil.cacheDictData();
        admin.req(getProjectUrl() + 'testpaper/getSurver', JSON.stringify([]), function (res) {
            let str = "<option value=''></option>";
            for (var i = 0; i < res.data.length; i++) {
                if (res.data[i] != null) {
                    str += '<option value="' + res.data[i].testpaperId + '">' + res.data[i].title + '</option>';
                }
            }
            $("#tesperName").html(str);
        }, 'post');

        admin.req(getProjectUrl() + 'sysPos/list', function (res) {
            let str = "<option value=''></option>";
            for (var i = 0; i < res.data.length; i++) {
                if (res.data[i] != null) {
                    str += '<option value="' + res.data[i].name + '">' + res.data[i].name + '</option>';
                }
            }
            $("#tesperName1").html(str);
        }, 'get');


        /**
         * 获取公告信息
         */
        function getNoticeInfo() {
            layer.load(2);
            admin.req(getProjectUrl() + 'sysNotice/getNoticeInfo', function (res) {
                admin.removeLoading();
                let noticeInfo = "                                <colgroup>\n" +
                    "                                    <col width='80'/>\n" +
                    "                                    <col width='180'//>\n" +
                    "                                    <col width='140'/>\n" +
                    "                                </colgroup>\n" +
                    "                                <thead>\n" +
                    "                                <tr>\n" +
                    "                                    <td align='center'>序号</td>\n" +
                    "                                    <td>公告标题</td>\n" +
                    "                                    <td align='center'>发布时间</td>\n" +
                    "                                </tr>\n" +
                    "                                </thead>\n" +
                    "                                <tbody>";
                let noticeInfoFlg = 0;// 设置公告前样式标记位
                for (let i = 0; i < res.length; i++) {
                    if (res[i].status == 3) {// 如果该信息已删除则不显示该信息
                        continue;
                    }
                    if (res[i].type == 2) {
                        noticeInfoFlg++;
                        switch (noticeInfoFlg % 3) {
                            case 0:
                                noticeInfo += "                                <tr>\n" +
                                    "                                    <td align='center'>\n" +
                                    "                                        <span class='layui-badge layui-badge-yellow layui-badge-priority'>" + noticeInfoFlg + "</span>\n" +
                                    "                                    </td>\n" +
                                    "                                    <td><span class='layui-text'><a>" + res[i].title + "</a></span></td>\n" +
                                    "                                    <td align='center'><span class='text-success'>" + res[i].createTime + "</span></td>\n" +
                                    "                                </tr>";
                                break;
                            case 1:
                                noticeInfo += "                                <tr>\n" +
                                    "                                    <td align='center'>\n" +
                                    "                                        <span class='layui-badge layui-badge-blue layui-badge-priority'>" + noticeInfoFlg + "</span>\n" +
                                    "                                    </td>\n" +
                                    "                                    <td><span class='layui-text'><a>" + res[i].title + "</a></span></td>\n" +
                                    "                                    <td align='center'><span class='text-success'>" + res[i].createTime + "</span></td>\n" +
                                    "                                </tr>";
                                break;
                            case 2:
                                noticeInfo += "                                <tr>\n" +
                                    "                                    <td align='center'>\n" +
                                    "                                        <span class='layui-badge layui-badge-green layui-badge-priority'>" + noticeInfoFlg + "</span>\n" +
                                    "                                    </td>\n" +
                                    "                                    <td><span class='layui-text'><a>" + res[i].title + "</a></span></td>\n" +
                                    "                                    <td align='center'><span class='text-success'>" + res[i].createTime + "</span></td>\n" +
                                    "                                </tr>";
                                break;
                        }
                    }
                }
                noticeInfo += "                                </tbody>";
                $("#noticeInfo").html(noticeInfo);// 公告栏内容填写
            }, {async: false});
        }

        /**
         * 获取当前登录用户通知信息
         */
        function getUserNoticeNum() {
            layer.load(2);
            admin.req(getProjectUrl() + 'sysNotice/received', function (res) {
                admin.removeLoading();
                let myNotice = "";
                for (let i = 0; i < res.data.length; i++) {
                    switch (res.data[i].readStatus) {
                        case 0:// 未读
                            myNotice += "                        <li class='layui-timeline-item'>\n" +
                                "                                    <i class='layui-icon layui-timeline-axis active'></i>\n" +
                                "                                    <div class='layui-timeline-content layui-text'>\n" +
                                "                                        <div class='layui-timeline-title'>" + res.data[i].title + "\n" +
                                "                                            <span class='pull-right'>" + res.data[i].publicTime + "</span></div>\n" +
                                "                                    </div>\n" +
                                "                                </li>\n";
                            break;
                        case 1:// 已读
                            myNotice += "                        <li class='layui-timeline-item'>\n" +
                                "                                    <i class='layui-icon layui-timeline-axis'></i>\n" +
                                "                                    <div class='layui-timeline-content layui-text'>\n" +
                                "                                        <div class='layui-timeline-title'>" + res.data[i].title + "\n" +
                                "                                            <span class='pull-right'>" + res.data[i].publicTime + "</span></div>\n" +
                                "                                    </div>\n" +
                                "                                </li>\n";
                            break;
                    }
                }
                $("#myNotice").html(myNotice);// 总访问量
            }, {async: false});
        }

        /* 表格头工具栏点击事件 */
        table.on('toolbar(gradeTable)', function (obj) {
            if (obj.event === 'personAnaly') { // 添加
                showPersonModel();
            }
        });
        function showPersonModel(){
            var checkRows = table.checkStatus('gradeTable');
            if(checkRows.data.length < 1){
                layer.msg("请选择一条数据！", {icon: 2, time: 2000});
                return false;
            }
            admin.req(getProjectUrl() + 'sysUser/personAnaly?id='+checkRows.data[0].id+"&name="+checkRows.data[0].name, function(res){
                layer.msg(res.message, {icon: 1, time: 1000}, function () {
                    insTb.reload();
                });
            }, 'get');
        }
        // 页面加载执行函数
        getNoticeInfo();// 通知公告信息
        getUserNoticeNum();// 获取当前登录用户通知信息

    });


</script>
</body>
</html>
